<template>
	<div class="box-container" v-loading="sLoading">
		<div class="box-content">
			<div class="addBoxTop">
				<div v-if="detailsId">
					<span class="font_size20">会员等级详细</span>
				</div>
				<div v-else class="font_size20">会员等级</div>
			</div>
			<div class="basc-info">
				<Descriptions :column="3" title="">
					<el-descriptions-item label="使用云店">{{ objectForm.shop_name || '--' }}</el-descriptions-item>
					<el-descriptions-item label="规则标题">{{ objectForm.title || '--' }}</el-descriptions-item>
					<el-descriptions-item label="会员等级">
						<span> {{ objectForm.grade || '--' }} </span>
					</el-descriptions-item>
					<el-descriptions-item label="会员数量">{{ objectForm.num_u || '--' }}</el-descriptions-item>
					<el-descriptions-item label="购买次数">{{ objectForm.num_od || '--' }}</el-descriptions-item>
					<el-descriptions-item label="总金额">{{ objectForm.price_i || '--' }}</el-descriptions-item>
					<el-descriptions-item label="折扣标题">{{ objectForm.zk_title || '--' }}</el-descriptions-item>
					<el-descriptions-item label="升级条件">{{ objectForm.up_title || '--' }}</el-descriptions-item>
				</Descriptions>
				<Descriptions :column="1" title="">
					<el-descriptions-item label="规则描述">
						<span>{{ objectForm.rule_txt || '--' }}</span>
					</el-descriptions-item>
				</Descriptions>
			</div>
			<div>
				<div class="mb10 mt10 flex_row">
					<h3>人员记录</h3>
				</div>
				<div>
					<el-row :gutter="12">
						<template v-if="userList && userList.length > 0">
							<LoadList :loading="listLoading" :no-more="noMore" :containerHeight="containerHeight"
								:distance="100" @load-more="loadMoreData">
								<div :style="{ overflow: 'auto' }">
									<div class="card_box" v-for="(item, index) in userList" :key="index">
										<el-col :span="6">
											<el-card shadow="always">
												<div class="">
													<p class="font_size14 bold">{{ item.cu_name }}</p>
													<p class="font_size12 ellipsis">{{ item.atime_tit }}</p>
													<p class="font_size12 ellipsis">{{ item.up_tit }}</p>
												</div>
											</el-card>
										</el-col>
									</div>
								</div>
							</LoadList>
						</template>
						<empty v-else></empty>
					</el-row>
				</div>
			</div>
		</div>
		<div class="footer-content" v-if="operations.length > 0">
			<footer-bottom :operations="operations" @operation="handleOperation" />
		</div>
		<bigImageMask ref="bigImageRef"></bigImageMask>
	</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, watch, computed, nextTick } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import Descriptions from "@/components/commV2/Description/descriptions.vue"
import bigImageMask from "@/components/goods/bigImageMask.vue";
import empty from "@/components/comm/empty.vue";
import LoadList from "@/components/commV2/LoadList/index.vue";
import FooterBottom from "@/components/commV2/FooterBottom/index.vue";

// 获取当前组件实例
const { proxy } = getCurrentInstance()
const props = defineProps({
	detailID: {
		type: String,
		default: "",
	},
})
const emit = defineEmits(['editStopTpBmFun'])

const sLoading = ref(false)
const bigImageRef = ref(null)
const objectForm = ref({})
const userList = ref([])

// 状态 1未开始  2进行中  3已失效  7已删除
const operations = computed(() => {
	return objectForm.value.status == 2 ? [
		{ text: '编辑', type: 'edit', class: 'primary' }
	] : objectForm.value.status == 1 ? [
		// { text: '停止', type: 'stop', class: 'danger' },
		{ text: '编辑', type: 'edit', class: 'primary' }
	] : []
})

const editTpBmFun = (type) => {
	emit('editStopTpBmFun', {
		type: type,
		id: props.detailID
	})
}
const handleOperation = (type) => {
	console.log("type=", type)
	switch (type) {
		case 'delete':
			break;
		case 'copy':
			break;
		case 'edit':
			editTpBmFun('edit')
			break;
		case 'stop':
			stopFun('stop')
			break;
	}
};

const stopFun = (type) => {
	proxy.$confirm("确定要停止该活动?", "温馨提醒", {
		confirmButtonText: "停止",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			let param = {
				act: type,
				id: props.detailID,
				status: 3,
			}
			proxy.$api({ url: config.yx_ugd_event_save, data: param }).then(res => {
				if (res.status == 1) {
					proxy.$message.success('停止成功')
					editTpBmFun(type)
					objectForm.value.status = 3
				}
			})
		})
		.catch(() => { });
}

const getDetail = async () => {
	sLoading.value = true
	const res = await proxy.$api({ url: config.yx_ugd_event_info, data: { id: props.detailID } }).finally(() => {
		setTimeout(() => {
			sLoading.value = false
		}, 200)
	})
	if (res.status === 1 && res.data) {
		const info = res?.data?.info
		objectForm.value = {
			...objectForm.value,
			...info
		}
		userList.value = res?.data?.ls || []
	}
}

const listLoading = ref(false)
const noMore = ref(false)
const pfrom = ref(1)
const loadMoreData = async () => {
	pfrom.value++
}

// 修改 watch 实现
const detailsId = ref("")
watch(() => props.detailID, (newVal) => {
	setTimeout(() => {
		if (newVal) {
			detailsId.value = newVal
			getDetail()
		}
	}, 200)
}, { immediate: true })

// Lifecycle hooks
onMounted(() => {
	pfrom.value = 1
})

const containerHeight = computed(() => {
	const headerHeight = 40 // Top header height
	const descriptionHeight = 270 // Approximate height of description section
	const dynamicHeight = headerHeight + descriptionHeight
	return `calc(100vh - ${dynamicHeight}px)`
})

defineExpose({
	getDetail,
	pfrom
})

</script>

<style lang="scss" scoped>
.box-container {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.box-content {
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
}

.footer-content {
	height: 60px;
}

.addBoxTop {
	width: 100%;
	height: 40px;
	border-bottom: 2px solid #E4E7ED;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.basc-info {
	margin-bottom: 5px;
	background-color: #fbfbfb;
	padding: 10px 15px;
	border-radius: 5px;
}

::v-deep .el-descriptions__body {
	background-color: transparent !important;
}

.poster-btn {
	border: 1px solid #f67fac;
	padding: 0 10px;
	border-radius: 5px;
	background-color: #fef0f0;
	color: #f67fac;
	cursor: pointer;
}

.avatar {
	height: 70px;
	width: 70px;
	border-radius: 50%;
}

.obj-avatar-box {
	height: 70px;
	width: 70px;
	border-radius: 6px;
	border: 1px solid #f5f9f9;
	overflow: hidden;
	background-color: #f5f9f9;
}

.obj-avatar {
	height: 100%;
	width: 100%;
	border-radius: 6px;

}

.card_box {
	::v-deep .el-card__body {
		padding: 10px !important;
	}
}

.tp_obj {
	box-sizing: border-box;
	background-color: #f1f4f8;
	padding: 5px 10px;
	border-radius: 5px;
	width: 130px;
	overflow: hidden;
}

.obj-ls-box {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.obj-ls-item {
	background-color: #f8f9fa;
	padding: 8px 16px;
	border-radius: 4px;
	margin-right: 5px;
	margin-bottom: 5px;
	border: 1px solid #e9ecef;
}

.card_box {
	::v-deep .el-col {
		margin-bottom: 12px !important;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.poster-container {
	position: relative;

	.poster-bg {}
}
</style>